<template>
  <div class="number-box flowInput flowInputComponent" style="padding: 0;">
    <div class="number bzNumber">
      <div class="pull-left p-rl">
        <!--<span class="arrow-top arrow">↑</span>-->
        <span class="unit">
          <el-select class="input" style="padding: 0;border: none;width: 50px;" v-model="upRule"
                     placeholder="请选择">
                  <el-option label="KB" value="KB"></el-option>
                  <el-option label="MB" value="MB"></el-option>
                  <el-option label="GB" value="GB"></el-option>
                </el-select>
        </span>
        <el-input-number class="number-item2" v-model="flowUp" @change="handleChange('flowUp')"
                         :min="1"></el-input-number>
        <!--<el-input-number size="mini" v-model="num7"></el-input-number>-->
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      initUp:{
        default:"",
      },
      initIndex:{
        default:""
      }
    },
    data(){
      return{
        flowUp:1,
        upRule:'KB',
        flowNumber:0,
      }
    },
    watch:{
      initUp(newVal,oldVal){
      },
      initIndex(newVal,oldVal){
      },
      flowUp(newVal,oldVal){
        if(newVal==undefined){
          if(this.initIndex!==""){
            this.$emit('getFlowUp',''+this.upRule+"&index="+this.initIndex);
          }else{
            this.$emit('getFlowUp',''+this.upRule);
          }
        }else{
          if(this.initIndex!==""){
            this.$emit('getFlowUp',newVal+this.upRule+"&index="+this.initIndex);
          }else{
            this.$emit('getFlowUp',newVal+this.upRule);
          }
        }
      },
      upRule(newVal,oldVal){
        if(this.initIndex!==""){
          this.$emit('getFlowUp',this.flowUp+newVal+"&index="+this.initIndex);
        }else{
          this.$emit('getFlowUp',this.flowUp+newVal);
        }
      },
    },
    mounted(){
      this.$nextTick(()=>{
        if(this.initUp!=""){
          this.initUp=parseInt(this.initUp);
          if(this.initUp%(1024*1024*1024)==0){
            this.flowUp=(this.initUp/(1024*1024*1024));
            this.upRule="GB";
          }else if(this.initUp%(1024*1024)==0){
            this.flowUp=(this.initUp/(1024*1024));
            this.upRule="MB";
          }else if(this.initUp%(1024)==0){
            this.flowUp=(this.initUp/1024);
            this.upRule="KB";
            console.log(this.flowUp);
          }
        }

        this.$emit('getFlowUp',this.flowUp+this.upRule);
      })
    },
    methods:{
      handleChange(text){
        // this[text]=this[text].replace(/[^\d]/ig,'');
      },
      checkKey(e){

      },
    }
  }
</script>

<style scoped lang="less" type="text/less">
  .number-box {
    display: flex;
    align-items: center;
    height: auto;
    border: 0;
    label {
      width: 60px;
      text-align: right;
      margin-right: 15px;
      color: #333;
      font-weight: 600;
    }
    .p-rl {
      width: 100%;
      position: relative;
      .arrow{
        position: absolute;
        z-index: 55;
        right: 80px;
        top: 4px;
        font-size: 20px;
        color: #409EFF;
      }
    }
    .number {
      flex: 1;
      .number-item1 {
        float: left;
        width: 50%;
        background: #409eff;
        color: #fff;
        text-align: center;
        padding: 5px;
      }
      .number-item2 {
        float: left;
        width: 100%;
      }
    }
  }

  .unit {
    position: absolute;
    right: 22px;
    z-index: 555;
    font-size: 13px;
    top: 5px;
    height: 28px;
    border-left: 1px solid #dcdfe6;
    overflow: hidden;
  }
</style>
